<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Header Merging (列头，行头合并)</title>
		<link href="../contents/bootstrap.min.css" rel="stylesheet"/>
		<link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
		
		<style type="text/css">
			.wj-flexgrid {
			  max-height: 200px;
			  margin-bottom: 12px;
			}
			.wj-cell .v-center {
			  position: relative;
			  top: 50%;
				transform: translateY(-50%);
			  white-space: pre-wrap;
			}
			
			body {
			  margin-bottom: 24px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div id="grid"></div>
		</div>
	</body>
	<script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
	<script type="text/javascript">
		/**
		 * 获取数据
		 */
		function getData() {
		    var countries = 'US,Germany,UK,Japan'.split(',');
		    var data = [];
		    for (var i = 0; i < 20; i++) {
		        data.push({
		            id: i,
		            country: countries[i % countries.length],
		            active: i % 5 != 0,
		            downloads: Math.round(Math.random() * 200000),
		            sales: Math.random() * 100000,
		            expenses: Math.random() * 50000
		        });
		    }
		    return data;
		}
		
		document.readyState === "complete"?init():window.onload = init;
		
		function init(){
			let grid = new wijmo.grid.FlexGrid("#grid", {
				allowMerging: 'ColumnHeaders',
				autoGenerateColumns: false,
				headersVisibility:wijmo.grid.HeadersVisibility.Column,
				columns:[
					{ binding: 'country', header: 'Country', allowMerging: true },
					{ binding: 'sales', header: 'Sales', format: 'n2' },
					{ binding: 'expenses', header: 'Expenses', format: 'n2' },
					{ binding: 'active', header: 'Active', allowMerging: true }
				],
				itemsSource: getData(),
				formatItem:(sender, e)=>{
					if(e.panel == sender.columnHeaders && e.range.rowSpan > 1){
						let html = e.cell.innerHTML;
						console.log(html);
						e.cell.innerHTML = `<div class='v-center'>${html}</div>`
					}
				}
			});
			
			let extraRow = new wijmo.grid.Row();
			extraRow.allowMerging = true;
			
			let panel = grid.columnHeaders;
			panel.rows.splice(0, 0, extraRow);
			
			for(let colIndex=1;colIndex<=2;colIndex++){
				panel.setCellData(0, colIndex, "Amounts");
			}
			
			["country", "active"].forEach(function(binding){
				let col = grid.getColumn(binding);
				col.allowMerging = true;
				panel.setCellData(0, col.index, col.header);
			});
		}
	</script>
</html>